﻿@using xConnected.Common.ExpertProfile
<div data-bind="if: $root.bookmark.profileAddedToExpertListAlert">
    <div class="alert alert-info" align="center">
        You have bookmarked expert: 
        <strong data-bind="text:  $root.bookmark.bookmarkModel().ExpertProfile().Title"></strong>
        in list:
        <strong data-bind="text:  $root.bookmark.bookmarkModel().ExpertList().Name"></strong>
    </div>
</div>
<div data-bind="if: $root.bookmark.profileBlockedAlert">
    <div class="alert alert-block" align="center">
        You have blocked this expert: 
        <strong data-bind="text:  $root.bookmark.bookmarkModel().ExpertProfile().Title"></strong>
    </div>
</div>
<section data-bind="with: profile">
    <div data-bind="visible: $root.profile.editDeleteNewButton" class="well">
        <div class="row-fluid">
            <strong style="color: #999999; font-size: 11px;">CREATE NEW EXPERT PROFILE</strong>
            <div class="pull-right" style="margin-top: 0px">
                <a style="margin-top: 0px" class="btn btn-small" data-bind="click: function() { $root.profile.selectNew(); }, tooltip: {title: '@Resources.Createnewprofilesmall', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><i class="icon-plus"></i></a>
            </div>
        </div>
    </div>
    <div class="row-fluid" align="center" style="margin-bottom: 10px"><span data-bind="text: $root.profile.fromPageNumber" style="font-size: smaller"></span> <span style="font-size: smaller">-</span> <span style="font-size: smaller" data-bind="text: $root.profile.toPageNumber"></span> <span style="font-size: smaller">from</span> <span data-bind="text: $root.profile.count" style="font-size: smaller"></span> <span style="font-size: smaller">matches</span></div>
    <ul class="thumbnails" data-bind="foreach: profiles">
        <li class="span3">
            <div class="thumbnail breadcrumb" style="height: 350px;">
                <div style="margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;">
                    <div class="row-fluid" style="height: 70px;">
                        <div align="left" class="span3">
                            <img class="img-rounded" data-bind="attr: {src: $data.Photo80X80()}" alt="Profile photo">
                        </div>
                        <div class="row-fluid">
                            <div class="span9">
                                <a href="#" data-bind="click: function() { $root.profile.selectDetails($data); }"><span data-bind="text: Title" style="margin-left: 5px"></span></a>
                                <a href="#" class="btn btn-mini pull-right" data-bind="click: function() { $root.profile.setCountryId($data); }, tooltip: {title: '@Resources.Showallexpertsfromcountry: ' +  $data.Country().Description, placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><img data-bind="attr: {src: '../../Content/img/Flags/' + $data.Country().ShortName.toLowerCase() + '.png'}" alt="Country flag"></a>
                            </div>
                            <small data-bind="text: DescriptionShort" class="span9"></small>
                        </div>
                    </div>
                    <hr/>
                    <div style="height: 160px;">
                        <div class="row">
                            <span style="font-size: smaller; font-weight: bold" class="span4">@Resources.Industry:</span>
                        </div>
                        <div class="row">
                            <div  data-bind="with: Industry" class="span6"><button class="btn btn-mini" style="font-size: x-small" data-bind="text: Description, click: function() { $root.profile.setIndustryId($data); },tooltip: {title: '@Resources.Showallexpertsin ' + $data.Description + ' @Resources.Industry', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></button></div>
                        </div>
                        <div class="row">
                            <span style="font-size: smaller; font-weight: bold" class="span4">@Resources.Categories:</span>
                        </div>
                        <div class="row-fluid">
                            <span data-bind="foreach: CategorySkills">
                                <span data-bind="with: Category">
                                    <a class="btn btn-mini" style="font-size: x-small" data-bind=" text: Description, click: function() { $root.profile.setCategoryId($data); }, tooltip: {title: '@Resources.Showallexpertsin ' + $data.CategoryName + ' @Resources.Category', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></a>
                                </span>
                            </span>
                        </div>
                        <div class="row">
                            <span style="font-size: smaller; font-weight: bold" class="span4">@Resources.Technologies:</span>
                        </div>
                        <div class="row-fluid">
                            <span data-bind="foreach: TechnologySkills">
                                <span data-bind="with: Technology">
                                    <a class="btn btn-mini" style="font-size: x-small" data-bind=" text: Name, click: function() { $root.profile.setTechnologyId($data); }, tooltip: {title: '@Resources.Showallexpertsin ' + $data.TechnologyName + ' @Resources.Technology', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></a>
                                </span>
                            </span>
                        </div>
                    </div>
                    <hr style="margin-bottom: 10px"/>
                    <div class="btn-toolbar" style="height: 45px;" align="center">
                        <a class="btn btn-mini" style="margin-right: 5px;" data-bind="click: function() { $root.profile.selectDetails($data); },tooltip: {title: '@Resources.Viewdetails', placement: 'bottom', trigger: 'hover'}"><i class="icon-zoom-in"></i></a>
                        <a class="btn btn-mini" style="margin-right: 5px;" data-bind="visible: $root.profile.editDeleteNewButton, click: function() { $root.profile.selectEdit($data); },tooltip: {title: '@Resources.EditProfile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}" ><i class="icon-pencil"></i></a>
                        @if (Request.IsAuthenticated)
                        {
                            <div  style="white-space: normal;" class="btn-group" data-bind="visible: $root.profile.messageButton,tooltip: {title: 'Bookmark this profile', placement: 'top', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                                <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#"  data-bind="click: function(){ $root.bookmark.selectProfileLoadExpertLists($data); }">
                                    <i class="icon-tag"></i>
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a data-toggle="modal" href="#CreateExpertListDialog">
                                            <span style="font-size: smaller; font-weight: bold; text-decoration: underline">Create new bookmark list</span>
                                        </a>
                                    </li>
                                    <li><hr style="margin-bottom: 2px; margin-top: 2px;"/></li>
                                    <li><span style="font-size: smaller; font-weight: bold;">Select bookmark list:</span></li>
                                    <li>
                                        <ul data-bind="foreach: $root.bookmark.ExpertLists" class="unstyled">
                                            <li>
                                                <a href="#" data-bind="click: function(){ $root.bookmark.addProfileToExpertList($data); }"><span data-bind="text: Name" style="font-size: smaller"></span></a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <a href="#" class="btn btn-mini" style="margin-right: 5px;" data-bind="visible: $root.profile.messageButton, click: function() { $root.folder.setExpertRecipient($data); },tooltip: {title: '@Resources.Sendmessagetothisprofile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                                <i class="icon-envelope"></i>
                            </a>
                             <a href="#" class="btn btn-mini" style="margin-right: 5px;" data-bind="visible: $root.profile.messageButton, click: function() { $root.bookmark.blockProfile($data); },tooltip: {title: 'Block this profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                                <i class="icon-ban-circle"></i>
                            </a>
                        }
                        <a style="margin-right: 5px;" class="btn btn-mini" data-toggle="modal" href="#DeleteDialog" data-bind="visible: $root.profile.editDeleteNewButton, click: function() { $root.profile.select($data); }, tooltip: {title: '@Resources.DeleteProfile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}" ><i class="icon-trash"></i></a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    @*  <div data-bind="visible: $root.profile.editDeleteNewButton" class="well">
        <div class="row-fluid">
            <strong style="color: #999999; font-size: 11px;">@Resources.CREATENEWPROFILE</strong>
            <div class="pull-right" style="margin-top: 0px">
                <a style="margin-top: 0px" class="btn btn-small" data-bind="click: function() { $root.profile.selectNew(); }, tooltip: {title: '@Resources.Createnewprofilesmall', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><i class="icon-plus"></i></a>
            </div>
        </div>
    </div>*@
</section>